<template>
  <div class="mynews">
    <ul>
      <li
        v-for="(i, index) in article"
        :key="index"
        @click="gotoArticle(i.nid)"
      >
        <div class="title">{{ i.nname }}</div>
        <div class="disc">{{ i.disc }}</div>
        <div class="footer">
          <div class="commentcount">
            <span v-if="!newscommentcount">评论数：(加载中)</span>
            <span v-else>评论数：({{ newscommentcount[index] }})</span>
          </div>
          <div class="status">
            状态：<span :class="i.status == 1 ? 'green' : 'red'">{{
              i.status == 1 ? "已上架" : "审核中"
            }}</span>
          </div>
          <div class="createtiem">
            发表日期：{{ i.createtime.split("T")[0] }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: [],
      newscommentcount: [],
      uid: "",
    };
  },
  methods: {
    getArticle() {
      // console.log(this.$store.state.uid);
      this.uid = this.$store.state.uid; //uid从session中回去
      let params = `uid=${this.uid}`;
      let url = "http://120.78.224.75:6677/getarticle";
      this.axios.post(url, params).then((res) => {
        if (res.data.result == undefined) {
          return;
        }
        this.$parent.newscount = res.data.result.length; //给父路由设置文章数统计
        this.article = res.data.result; //创建当前用户文章列表
        for (let i in res.data.result) {
          let params2 = `nid=${res.data.result[i].nid}`;
          let url2 = "http://120.78.224.75:6677/getnewscommentcount";
          this.axios.post(url2, params2).then((res) => {
            this.newscommentcount.push(res.data.result[0].count);
          });
        }
        // console.log(this.newscommentcount);
      });
    },
    // 跳转点击页
    gotoArticle(nid) {
      this.$router.push(`/article?nid=${nid}`);
    },
  },
  mounted() {
    this.getArticle();
  },
};
</script>

<style lang="scss" scoped>
.mynews {
  width: 680px;
  li {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  .title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }
  .disc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    cursor: pointer;
  }
  .footer {
    display: flex;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    .status > span {
      color: white;
      padding: 5px;
      border-radius: 3px;
    }
    .green {
      background-color: green;
    }
    .red {
      background-color: red;
    }
  }
  .createtiem {
    text-align: right;
  }
}
</style>